<script setup lang="ts">
const { luckySpinFirstTipsState } = useFirstRechargeTips();
const { luckSpinShow } = useFirstRechargeTips();
const { bonuses } = queries.useBonusesQuery();
const authed = useAuthed();
const currencyStore = useCurrencyStore();

function onClick() {
  luckySpinFirstTipsState.clickSelf = true;
  globalPopups.wallet.open({ initTab: 'deposit', isDepositPage: true, checkedBonusKey: 'signUp' });
}
</script>

<template>
  <div v-if="luckSpinShow && authed && Number((bonuses?.signup.amount ?? 0))" class="titp shadow-[0_0_8_0_rgba(0, 0, 0, 0.50)] flex-center cursor-pointer gap-2 border-1 border-sys-text-marker rounded-9999px border-solid px-5 py-1.5 word-spacing-normal" @click="onClick">
    <I18nT keypath="xhp0X4Koe5l_9g1Vf0Ya5" tag="p" class="flex-center gap-1 whitespace-nowrap text-sm text-white font-700">
      <template #reward>
        <TAmount :value="currencyStore.convert('USD', (Number((bonuses?.signup.amount ?? 0)) ?? 15), currencyStore.cryptoName)" :decimals="0" :symbol="(currencyStore.cryptoName === 'DIAMOND' ? 'USDT' : currencyStore.cryptoName)" format="fixed-dec" colored="inherit" iconPos="left" />
      </template>
    </I18nT>
  </div>
</template>

<style scoped lang="scss">
.titp {
  background: radial-gradient(84.02% 123.6% at 16.73% -9.06%, rgba(234, 179, 8, 0.2) 0%, rgba(19, 20, 22, 0.2) 68.89%),
    #26272e;
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 15%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #cc9c07;

    @media bp-lt-tabletl {
      left: 8%;
    }
  }
}
</style>
